<template>
  <el-dialog
    class="abow_dialog"
    :close-on-click-modal="false"
    :modal-append-to-body="appendToBody"
    :append-to-body="true"
    title="选择业务对象"
    width="75%"
    top="10vh"
    :visible.sync="visible"
    @close="$emit('update:singleShow', false)"
    :show="singleShow"
  >
    <div>
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="别名">
          <el-input v-model="queryForm.objKey" clearable></el-input>
        </el-form-item>
        <el-form-item label="对象名称">
          <el-input v-model="queryForm.objName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <Row>
        <Col
          span="22"
          class="no-padding border-bottom border-right boder-margin"
        >
          <Table
            highlight-row
            ref="selection"
            height="450"
            @on-select-cancel="cancelSelectionChange"
            :columns="tableColumns"
            :data="tableData"
            style="padding-left: 10px; padding-top: 10px"
          ></Table>
          <Page
            ref="pages"
            :total="userTotal"
            show-elevator
            @on-change="changePanelUser"
            style="margin-top: 3px"
          />
        </Col>
      </Row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmDialog">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  businessObjectList,
} from "@/api/form";

export default {
  methods: {
    mount() {},
    created() {},
    resetQuery: function () {
      this.queryForm.objName = "";
      this.queryForm.objKey = "";
      this.queryForm.page = 1;
    },
    reset: function () {
      this.resetQuery();
      this.getAllBus();
    },
    search: function () {
      this.getAllBus();
    },
    changePanelUser: function (page) {
      this.queryForm.page = page;
      this.getAllBus();
    },
    cancelSelectionChange: function (selection) {
      this.showTableData = this.unique(selection);
    },
    operateTable: function (selection) {
      var array = this.showTableData.concat(selection);
      var newArray = this.unique(array);
      this.showTableData = newArray;
    },
    selectionOnChange: function (selection) {
      this.operateTable(selection);
    },
    unique(arr) {
      // 根据唯一标识no来对数组进行过滤
      const res = new Map(); //定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter(
        (arr) => !res.has(arr.tableKey) && res.set(arr.tableKey, 1)
      );
    },
    remove(userNo) {
      // 根据唯一标识no来对数组进行过滤
      // const res = new Map(); //定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return this.showTableData.filter((arr) => !(arr.tableKey == userNo));
    },
    exist(tableKey) {
      // 根据唯一标识no来对数组进行过滤
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return this.showTableData.tableKey == tableKey;
    },

    selectAll: function (selection) {
      this.operateTable(selection);
      this.curentTableData = selection;
    },
    selectAllCancel: function () {
      var select = this.$refs.selection.data;
      for (var i = 0; i < select.length; i++) {
        this.showTableData = this.remove(select[i].tableName);
      }
    },
    getAllBus: function () {
      businessObjectList(this.queryForm).then((response) => {
        if (response.code == 0) {
          this.tableData = response.data;

          this.userTotal = parseInt(response.count);
          this.$nextTick(() => {
            var objData = this.$refs.selection.$refs.tbody.objData;
            var leftData = [];
            for (var obj in objData) {
              leftData.push(objData[obj]);
            }
            if (leftData) {
              for (var i = 0; i < leftData.length; i++) {
                if (this.exist(leftData[i].tableName)) {
                  this.$refs.selection.$refs.tbody.objData[i]._isChecked = true;
                  break;
                }
              }
            }
          });
        }
      });
    },
    confirmDialog() {
      if (this.onOk) {
        this.visible = false;
        this.onOk(this.currentChooseUser);
      }
    },
    changePanel: function () {},
  },
  data() {
    return {
      visible: this.singleShow,
      appendToBody: false,
      curentTableData: [],
      index: 1,
      roleDefaultProps: {
        children: "childList",
        label: "name",
      },
      orgDefaultProps: {
        children: "children",
        label: "deptName",
      },
      positionDefaultProps: {
        children: "children",
        label: "posName",
      },
      activiteCode: "",
      serviceVal: "",
      activePanel: "",
      tableHeight: 420,
      tableMinHeight: 484,
      userTotal: 0,
      currentChoose: "",
      currentChooseUser: {},
      orgModel: "",
      positionModel: "",
      roleData: [],
      orgData: [],
      positionDemension: [],
      orgDemension: [],
      queryForm: {
        page: 1,
        length: 10,
        objName: "",
        objDesc: "",
        objKey: "",
      },

      tableColumns: [
        {
          title: "选择",
          key: "id",
          width: 70,
          align: "center",
          render: (h, params) => {
            let id = params.row.id;
            let flag = false;
            if (this.currentChoose === id) {
              flag = true;
            } else {
              flag = false;
            }

            // let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag,
                },
                on: {
                  "on-change": () => {
                    this.currentChooseUser = params.row;
                    this.currentChoose = params.row.id;
                  },
                },
              }),
            ]);
          },
        },

        {
          title: "别名",
          key: "objKey",
        },
        {
          title: "对象名称",
          key: "objName",
        },
        {
          title: "分类",
          key: "groupName",
        },
        {
          title: "创建时间",
          key: "createTime",
        },
        {
          title: "描述",
          key: "objDesc",
        },
      ],
      tableData: [],
      showTableData: [],
    };
  },
  mount() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop;
  },
  props: {
    singleShow: {
      type: Boolean,
      default: false,
    },
    onOk: {
      //定义onOK属性
      type: Function,
    },
    existData: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    // singleShow : (n ,o) => {//箭头函数  不然会发生this改变
    // }
    // ,
    singleShow() {
      //分页初始化为第一页
      this.$nextTick(function () {
        this.$refs["pages"].currentPage = 1;
      });
      if (this.singleShow) {
        if (this.existData) {
          this.currentChooseUser = this.existData;
          this.showTableData = this.existData;
          this.currentChoose = this.existData.id;
        } else {
          this.currentChoose = "";
          this.currentChooseUser = {};
        }
        this.getAllBus();
      } else {
        this.resetQuery();
      }
      this.visible = this.singleShow;
    },
  },
};
</script>
<style lang="scss">
</style>
